<template>
  <div class="h1-home">
    <div class="h1-banner">
      <div class="h1-b-sign">
        <p>全球领先数字金融衍生品</p>
        <p>交易所</p>
        <ul>
          <li>安全</li>
          <li>公正</li>
          <li>优质</li>
          <li>创新</li>
        </ul>
      </div>
    </div>
    <div class="h1-kline">
      <div class="h1-k-center">
        <p>行情中心</p>
        <p>Market center</p>
        <el-table v-loading="load" element-loading-spinner="el-icon-loading" :data="tableData" style="width: 100%">
          <el-table-column prop="childCoinName" label="交易对" min-width="180">
            <template slot-scope="scope">
              <span>{{scope.row.childCoinName}}/{{scope.row.motherCoinName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dataOne.close" label="价格" min-width="180"></el-table-column>
          <el-table-column prop="dataOne.riseAndfall" label="24H涨跌" min-width="180">
            <template slot-scope="scope">
              <span :class="scope.row.dataOne.riseAndfall>0?'green':'red'">{{$getBeforeDate.mulFun(Number(scope.row.dataOne.riseAndfall),100)}}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="dataOne.high" label="24H最高价" min-width="180"></el-table-column>
          <el-table-column prop="dataOne.low" label="24H最低价" min-width="180"></el-table-column>
          <el-table-column prop="dataOne.volume" label="24H成交量" min-width="180"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="h1-intro">
      <div class="h1-i-word">
        <ul>
          <li>
            <img src="../assets/img/h1-01.png" alt="">
            <p>安全</p>
            <p>多重风险预警系统专业分布式架构</p>
          </li>
          <li>
            <img src="../assets/img/h1-02.png" alt="">
            <p>公正</p>
            <p>交易海数据上链无人可操纵，无法被篡改</p>
          </li>
          <li>
            <img src="../assets/img/h1-03.png" alt="">
            <p>优质</p>
            <p>用户至上原则，24小时优质服务</p>
          </li>
          <li>
            <img src="../assets/img/h1-04.png" alt="">
            <p>创新</p>
            <p>秒合约 全新的数字货币衍生品</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="h1-code">
      <div class="h1-c-code">
        <div class="h1-c-c-left">
          <img src="../assets/img/zuobian.png" alt="">
        </div>
        <div class="h1-c-c-right">
          <p>下载APP客户端</p>
          <div>
            <div>
              <img src="../assets/img/saoyisao.png" alt="">
              <span>立即扫码下载</span>
            </div>
            <div>555</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {get24hrDataForAgreement } from '../api/api'
export default {
  name: "h1-home",
  data() {
    return {
      load:false,
      tableData: []
    };
  },
  created(){
    this.getAgreeListCircle();
  },
  methods: {
    getAgreeListCircle() {
      this.load = true
      get24hrDataForAgreement().then(res => {
        this.load = false
        this.tableData = res.data.data;
      });
    },
  }
};
</script>
<style lang='less' scope>
.h1-home {
  .h1-banner {
    height: 550px;
    background: url("../assets/img/h1-banner.png") no-repeat;
    background-size: cover;
    >.h1-b-sign {
      max-width: 1200px;
      margin: 0 auto;
      padding-top: 160px;
      > p:nth-of-type(1),
      > p:nth-of-type(2) {
        font-size: 44px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 20px;
      }
      > ul:nth-of-type(1) {
        display: flex;
        > li {
          margin-right: 50px;
          margin-top: 20px;
          font-size: 14px;
          color: #fff;
          border-bottom: 1px solid #32c0b6;
        }
      }
    }
  }
  .h1-kline{
    background: url("../assets/img/h1-beijing02.png") no-repeat;
    background-size: cover;
    >.h1-k-center{
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 0;
      >p:nth-of-type(1){
        text-align: center;
        font-size: 30px;
        color: #334D50;
        font-weight: bold;
      }
      >p:nth-of-type(2){
        text-align: center;
        font-size: 22px;
        color: #0A9187;
        font-weight: bold;
        margin: 20px 0 50px;
      }
    }
  }
  .h1-intro{
    background: #fff;
    >.h1-i-word{
      max-width: 1200px;
      margin: 0 auto;
      padding: 150px 0;
      >ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        >li{
          font-size: 12px;
          text-align: center;
          >img{
            margin-left: -40px;
          }
          >p:nth-of-type(1){
            font-size: 20px;
            color: #314D4F;
            font-weight: bold;
            margin-bottom: 15px;
          }
          >P:nth-of-type(2){
            color: #A1B1B0;
            font-size: 12px;
            line-height: 24px;
          }
        }
      }
    }
  }
  .h1-code{
    background-color: #FAFAFA;
    // background: url("../assets/img/h1-beijing03.png") no-repeat;
    // background-size: cover;
    >.h1-c-code{
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .h1-c-c-right{
        >p:nth-of-type(1){
          font-size:30px ;
          color: #314D4F;
          margin-bottom: 10px;
        }
        >div{
          border: 1px solid #314D4F;
          border-radius: 4px;
          padding: 20px 0;
          >div:nth-of-type(1){
            display: flex;
            justify-content:center;
            align-items: center;
            font-size: 20px;
            margin: 10px 0;
          }
          >div:nth-of-type(2){
            margin: 0 auto;
            height: 150px;
            width: 150px;
            border: 1px solid #314D4F;
          }
        }
      }
    }
  }
}
.red {
    color: #ee633e !important;
  }
.green {
    color: #0a9187 !important;
  }
</style>
